<template>
    <div class="e-chart" ref="echart"></div>
</template>

<script>
    // let echarts = require('echarts/lib/echarts');
    // require("echarts/lib/chart/line");
    // require("echarts/lib/component/tooltip");
    export default {
        name: "chart-view-bar",
        props: {
            colors: {
                type: Array,
                default() {
                    return [];
                }
            },
            source: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            autoRefresh: {
                type: Boolean,
                default: false
            },
            contrastsNum:{
              type: Number,
              default() {
                return Number;
              }
            },
             name: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                myChart: null,
                dataInfo:'',
                option:null,
            }
        },
        methods: {
            initChart() {
                let _scope = this;
                if (_scope.myChart != null) {
                    _scope.myChart.clear();
                }
                if (_scope.source.length > 1) {
                    this.option = {
                        // title:{
                        //   text:this.name,
                        //   textStyle:{color :'#fff',fontSize:14}
                        // },
                        color: _scope.colors,
                        grid: {
                            containLabel: true,
                            top: 40,
                            right: 24,
                            bottom: 16,
                            left: 12
                        },
                        legend: {
                            type: "scroll",
                            icon: "circle",
                            textStyle: {
                                color: "#959595"
                            },
                            pageTextStyle: {
                                color: "#959595"
                            },
                            pageIconColor: '#959595',
                            pageIconInactiveColor: '#2f4554'
                        },
                        tooltip: {
                            trigger: "axis",
                            axisPointer: {
                                type: "shadow",
                                shadowStyle: {
                                    color: "rgba(82,130,228,0.08)"
                                }
                            },
                            textStyle:{
                              align:'left'
                            }
                        },
                        textStyle: {
                            color: "#959595"
                        },
                        xAxis: {
                            type: "category",
                            axisLine: {
                                lineStyle: {
                                    color: "#979797"
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: "value",
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#979797",
                                    type: "dotted"
                                }
                            }
                        },
                        toolbox: {
                          show: true,
                          iconStyle:{
                            color:'#fff',
                            borderColor:'#fff',
                          },
                          feature: {
                            myFull: {
                                show: true,
                                title: '全屏查看',
                                icon: 'path://M85.333333 682.666667v128a128 128 0 0 0 128 128h128a42.666667 42.666667 0 0 0 0-85.333334H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-128a42.666667 42.666667 0 0 0-85.333334 0z m597.333334 256h128a128 128 0 0 0 128-128v-128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 1-42.666666 42.666666h-128a42.666667 42.666667 0 0 0 0 85.333334z m256-597.333334V213.333333a128 128 0 0 0-128-128h-128a42.666667 42.666667 0 0 0 0 85.333334h128a42.666667 42.666667 0 0 1 42.666666 42.666666v128a42.666667 42.666667 0 0 0 85.333334 0zM341.333333 85.333333H213.333333a128 128 0 0 0-128 128v128a42.666667 42.666667 0 0 0 85.333334 0V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h128a42.666667 42.666667 0 0 0 0-85.333334z',
                                onclick (e){
                                    _scope.fullscreenChart()
                                }
                            }
                          }
                        },
                        dataset: {
                          // source: _scope.formatterDataset()
                          source: _scope.source
                        },
                        series: _scope.formatterSeries()
                    };
                    
                  if (this.autoRefresh) {
                    this.option.dataZoom = [
                      {
                          type: 'slider',
                          start: 67,
                          end: 100
                      },
                    ]
                    this.option.grid.bottom = '20%'
                    this.option.toolbox.feature.dataZoom={
                      yAxisIndex: false,
                            show:false,
                    }
                  }
                  _scope.myChart = this.$echarts.init(_scope.$refs.echart);
                  _scope.myChart.setOption(this.option);
                  window.addEventListener("resize", () => {
                    _scope.myChart.resize();
                  });
                }else{
                  this.option = {
                    title: {
                      show: _scope.source.length === 1,
                      extStyle: {
                        color: "white",
                        fontSize: 20
                      },
                      text: "暂无数据",
                      left: "center",
                      top: "center",
                      color: "#ffffff",
                      textStyle:{
                        color: "#ffffff"
                      }
                    },
                    color: _scope.colors,
                    grid: {
                      containLabel: true,
                      top: "15%",
                      right: "6%",
                      bottom: "15%",
                      left: "5%"
                    },
                    legend: {
                      type: "scroll",
                      icon: "circle",
                      data: ['2015', '2016'],
                      textStyle: {
                        color: "#959595"
                      },
                      pageTextStyle: {
                        color: "#959595"
                      },
                      pageIconColor: '#959595',
                      pageIconInactiveColor: '#2f4554'
                    },
                    tooltip: {
                      trigger: "axis",
                      axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                          color: "rgba(82,130,228,0.08)"
                        }
                      },
                      textStyle:{
                        align:'left'
                      }
                    },
                    textStyle: {
                      color: "#959595"
                    },
                    xAxis: {
                      type: "category",
                      // type: "value",
                      axisLine: {
                        lineStyle: {
                          color: "#979797"
                        }
                      },
                      axisTick: {
                        show: false
                      }
                    },
                    yAxis: {
                      type: "value",
                      axisLine: {
                        show: false
                      },
                      axisTick: {
                        show: false
                      },
                      splitLine: {
                        lineStyle: {
                          color: "#979797",
                          type: "dotted"
                        }
                      }
                    },
                    dataset: {
                      // source: _scope.formatterDataset()
                      source: _scope.source
                    },
                    series: _scope.formatterSeries()
                  };
                  _scope.myChart = this.$echarts.init(_scope.$refs.echart);
                  _scope.myChart.setOption(this.option);
                  window.addEventListener("resize", () => {
                    _scope.myChart.resize();
                  });
                }
            },
          // 初始化 series
          formatterSeries() {
            let _scope = this;
            let _source = _scope.source;
            // let _source = _scope.dataInfo
            let _series = [];
            for (let i = 0; i < _source[0].length - 1; i++) {
              _series.push({
                type: "bar",
                barMaxWidth: "40%",
                barCategoryGap: "40%"
              });
            }

            return _series;
          },
          //初始化source
          formatterDataset(){
            let _scope = this;
            let arr = [["product"]]
            if(_scope.contrastsNum>0){
            //获取对比
            _scope.source.forEach((item,index)=>{
              if(index!=0){
                item.forEach((i,x)=>{
                  if(x!=0){
                    function isType() {
                      let bl = false
                      for (let a = 0;a<=arr[0].length;a++){
                        if(arr[0][a]!=_scope.getCaption(i,0)){
                          bl = true
                        }else{
                          bl =  false
                          return
                        }
                      }
                      return bl
                    }
                    if(isType()){
                      arr[0].push(_scope.getCaption(i,0))
                    }
                  }
                })
              }
            })
            //获取指标
            let _product = []
            _scope.source[0].forEach((item,index)=>{
              if(index!=0){
                _product.push(item)
              }
            })
            //设置显示数量
            let productInit = ["product"]
            arr[0].forEach((item,index)=>{
              if(index!=0){
                _product.forEach((i,x)=>{
                  if(item==''){
                    productInit.push(i)
                  }else {
                    productInit.push(item+'-'+i)
                  }
                })
              }
            })
            arr[0] = productInit

            let productList = []
            arr[0].forEach((item,index)=>{
              if(index!=0){
                productList.push(_scope.getCaption(item,0))
              }
            })
            console.log(productList,'productList')

            let isRepeat = _scope.getNary(_scope.source)
            console.log(isRepeat,'isRepeat')
            // console.log(_product,'_product')
            //初始化图表数据
            let name =  ''
            let _index = ''
            let l_name = ''
            _scope.source.forEach((item,index)=>{
              if(index!=0){
                item.forEach((i,x)=>{
                  if(x==0 && name!=item[0]){
                    arr.push([])
                    index = arr.length - 1
                    arr[index].push(i)
                    name = i
                    _index = index
                  }else{
                    if(x!=0){
                      if(isRepeat){
                        l_name = _scope.getCaption(i,0)
                        if(l_name==productList[x-1]){
                          arr[_index].push(_scope.getCaption(i,1))
                          // return
                        }else{
                          if(arr[_index][1]!="-"){
                            for(let a = 0;a < productList.length/2; a++){
                              arr[_index].push("-")
                            }
                            arr[_index].push(_scope.getCaption(i,1))
                          }else{
                            arr[_index].push(_scope.getCaption(i,1))
                          }
                        }
                      }else {
                        arr[_index].push(_scope.getCaption(i,1))
                      }
                    }
                  }
                })
              }
            })
            }else{
                arr = _scope.source
            }
            _scope.dataInfo = arr
            console.log(arr)
            return arr
          },
          //截取"-"前后数据
          getCaption(obj,state) {
            obj = obj+''
            let index=obj.lastIndexOf("\-");
            if(state==0){
              obj=obj.substring(0,index);
            }else {
              obj=obj.substring(index+1,obj.length);
            }
            return obj;
          },
          //判断数据是否有重复数据
          getNary(nary){
            let bl = true
            for(let i = 0; i < nary.length - 1; i++) {
              if(nary[i][0] == nary[i + 1][0]) {
                bl = false
                return bl
              }
            }
            return bl
          },
          fullscreenChart(tag = false){
            this.$emit('fullscreen',this.option, tag)
          },
          updateChart(){
              this.myChart.setOption({
                  dataset: {
                    source: this.source
                  }
              });
          }
        },
        watch: {
            source: {
                handler() {
                    if (!this.option || (this.option.title && this.option.title.text === '暂无数据' && this.source.length)) {
                        this.initChart();
                        this.fullscreenChart(true)
                    }else{
                        this.updateChart()
                        this.fullscreenChart(true)
                    }
                },
                deep: true,
                immediate: false,
            },
        },
    }
</script>